<template>
  <div class="home">
    <el-card shadow="never">
      <!-- 顶部统计 -->
      <el-row v-if="config.show_statisic == 1">
        <el-col :span="24" >
          <el-tooltip class="item" content="配置此统计数据，请滚动页面，点击底部的按钮" placement="top-start">
            <el-card shadow="always" style="margin-bottom: 10px">
              <el-row :gutter="10">
                <el-col
                    v-for="(item,index) in statisic"
                    :key="index"
                    :xs="24" :sm="12" :md="6" :lg="4" :xl="3">
                  <el-card shadow="hover">
                    <div slot="header" style="display: flex;align-items: center;">
                      <i class="el-icon-s-data" style="font-size: 1.8em; color: #22c4d0;margin-right: 10px;"/>
                      <div style="font-size: 0.8em;"> {{ item.name }}</div>
                    </div>
                    <h3 style="font-size: 1.2em;color: #6fb3e0;">{{ item.value }}</h3>
                  </el-card>
                </el-col>
              </el-row>
            </el-card>
          </el-tooltip>
        </el-col>
      </el-row>


      <!-- 统计图表 -->
      <el-row :gutter="10" v-if="config.show_chart == 1">
        <el-col class="hidden-sm-and-down" :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 10px" v-for="(item,index) in chart" :key="index">
          <el-card>
            <div class="chart">
              <LineChart :id="'chart' + index" :data="item"></LineChart>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 快捷菜单 -->
      <el-row v-if="config.show_menu == 1">
        <el-col :span="24">
          <el-tooltip class="item" content="配置此启动按钮，请配置菜单属性，允许首页显示" placement="top-start">
            <el-card shadow="always" style="margin-bottom: 10px">
              <el-row :gutter="10">
                <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3" v-for="(item,index) in menus" :key="index">
                  <router-link :to="item.url">
                    <el-card shadow="hover" >
                      <div style="width: 100%;text-align: center;">
                        <i v-if="item.menu_pic" :class="item.menu_pic" style="font-size: 36px;color: #6fb3e0;margin-bottom: 10px;"></i>
                        <i v-else class="el-icon-menu" style="font-size: 36px;color: #6fb3e0;margin-bottom: 10px;"></i>
                        <div>{{ item.title }}</div>
                      </div>
                    </el-card>
                  </router-link>
                </el-col>
              </el-row>
            </el-card>
          </el-tooltip>
        </el-col>
      </el-row>

      <!-- 系统信息/更新日志 -->
      <el-row :gutter="10">
        <!-- 系统信息 -->
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 10px">
          <el-card shadow="always" class="hidden-sm-and-down">
            <div slot="header" class="clearfix">
              <span>系统信息</span>
              <el-tooltip class="item" effect="dark" content="打开文件[ui/src/views/admin/base/home.vue]删除此内容" placement="top-start">
                <el-button style="float: right; padding: 3px 0" type="text">说明信息</el-button>
              </el-tooltip>
            </div>
            <div class="chart" style="height:234px;overflow-y:auto;padding: 10px">
              <el-descriptions :column="2" size="medium" border>
                <el-descriptions-item label="后端语言">
                  <a href="https://www.php.net/">PHP 7.4</a>
                </el-descriptions-item>
                <el-descriptions-item label="后端框架">
                  <a href="https://www.thinkphp.cn/">Thinkphp 6</a>
                </el-descriptions-item>
                <el-descriptions-item label="前端语言">
                  <a href="https://www.runoob.com/js/js-tutorial.html">JavaScript</a>
                </el-descriptions-item>
                <el-descriptions-item label="前端框架">
                  <a href="https://v2.cn.vuejs.org/">Vue 2.6</a>
                </el-descriptions-item>
                <el-descriptions-item label="前端组件库">
                  <a href="https://element.eleme.cn/2.15/#/zh-CN/">Element-UI 2.5.11</a>
                </el-descriptions-item>
                <el-descriptions-item label="表格组件">
                  <a href="https://vxetable.cn/v3/#/table/start/install">Vxe-table 3.6.9</a>
                </el-descriptions-item>
                <el-descriptions-item label="数据库软件">
                  <a href="https://www.mysql.com/">MySQL v5.7</a>
                </el-descriptions-item>
                <el-descriptions-item label="集成环境">
                  <a href="http://www.rdscode.cn/laragon-wamp.zip">Laragon 5</a>
                </el-descriptions-item>
                <el-descriptions-item label="功能预览">
                  <el-link type="success" href="https://demo.simplest.net.cn" target="_blank">demo.simplest.net.cn</el-link>
                </el-descriptions-item>
                <el-descriptions-item label="教程文档">
                  <el-link type="success" href="https://doc.simplest.net.cn" target="_blank">doc.simplest.net.cn</el-link>
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </el-card>
        </el-col>
        <!-- 更新日志 -->
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 10px">
          <el-card shadow="always">
            <div slot="header" class="clearfix">
              <span>更新日志</span>
              <el-tooltip class="item" effect="dark" content="打开文件[ui/src/views/admin/base/home.vue]删除此内容" placement="top-start">
                <el-button style="float: right; padding: 3px 0" type="text">说明信息</el-button>
              </el-tooltip>
            </div>
            <div class="chart" style="height:234px;overflow-y:auto;padding: 10px">
              <el-timeline>
                <el-timeline-item
                    placement="top" :timestamp="item.timestamp" type="success"
                    v-for="(item,index) in activities" :key="index">
                  <el-card>
                    <div style="color: #7e8c8d;line-height: 2em;">{{item.content}}</div>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 底部设置按钮 -->
      <div class="hidden-sm-and-down" style="padding-bottom: 20px">
        <div v-if="config.show_chart == 1">
          <el-button
              style="float: right; padding: 10px 5px 0px 0px"
              type="text"
              v-if="checkPermission('/Admin/Chart/add.html') || checkPermission('/Admin/Chart/update.html') || checkPermission('/Admin/Chart/delete.html')"
              @click="setChart">图表设置</el-button>
        </div>
        <div v-if="config.show_statisic == 1">
          <el-button
              style="float: right; padding: 10px 5px 0px 0px"
              type="text"
              v-if="checkPermission('/Admin/Statisic/add.html') || checkPermission('/Admin/Statisic/update.html') || checkPermission('/Admin/Statisic/delete.html')"
              @click="setStatisic">统计设置</el-button>
        </div>
      </div>

    </el-card>

    <!--统计设置-->
    <SetStatisic :info="setStatisicInfo" :show.sync="dialog.setStatisicDialogStatus" :size="formSize" refesh_list="homeData"></SetStatisic>

    <!--设置图表-->
    <SetChart :info="setChartInfo" :show.sync="dialog.setChartDialogStatus" :size="formSize" refesh_list="homeData"></SetChart>
  </div>
</template>
<script>
import {homeData} from '@/api/admin/base'
import LineChart from "@/components/echart/LineBarChart";
import SetStatisic from '@/views/admin/base/setStatisic.vue'
import SetChart from '@/views/admin/base/setChart.vue'
import {mapGetters} from "vuex";
import MyUtils from "@/utils/common";
export default {
  components: { LineChart, SetStatisic, SetChart },
  computed: {
    ...mapGetters(['tagsView', 'formSize', 'inputWidth', 'labelWidth', 'tableHeight', 'rowHeight']),
  },
  data() {
    return {
      config: {
        show_chart: 1,
        show_menu: 1,
        show_statisic: 1,
      },
      statisic: [],
      menus: [],
      chart: [],
      dialog: {
        setStatisicDialogStatus : false,
        setChartDialogStatus : false,
      },
      setStatisicInfo:{},
      setChartInfo:{},
      activities: [
        {
          content: "升级到Thinkphp 8版本；",
          timestamp: '2023-10-17'
        },
        {
          content: "优化数据权限，结合数据所有者和部门信息进行数据隔离和授权",
          timestamp: '2023-10-17'
        },
        {
          content: "优化数据列表方法，统一Model和SQL数据查询；",
          timestamp: '2023-10-17'
        },
      ]
    }
  },
  methods: {
    homeData() {
      homeData().then(res => {
        // console.log(res)
        if (res.status == 200) {
          this.config = res.config
          this.statisic = res.statisic
          this.menus = res.menus
          this.chart = res.chart
        }
      })
    },
    setStatisic(row){
      this.dialog.setStatisicDialogStatus = true
    },
    setChart(row){
      this.dialog.setChartDialogStatus = true
    },

  },
  activated() {
    this.homeData()
    if(MyUtils.isMobile()){
      this.$alert('本系统没有专门适配移动端，请使用PC登录系统，以获得最佳效果！', '友情提醒');
    }
  },
};
</script>
<style scoped>
.home {
  overflow-x:hidden;
  overflow-y:auto;
  width: 99%;
  height: 94%;
  padding-right: 15px;
  margin-bottom: 10px;
}

.chart {
  overflow-x:hidden;
  overflow-y:hidden;
  width: 100%;
  height: 300px;
}

.sale {
  font-weight: bold;
  color: #00C777;
}
</style>
